<template>
  <div class="modification">
    <div class="card text-left">
      <div class="card-body">
        <h4 class="card-title">修改个人信息</h4>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm myfrom"
          style="padding-left:50px;padding-right:50px;"
        >
          <el-form-item class="my-el-form-item" label="用户名" prop="username">
            <el-input type="text" clearable v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item prop="address" label="地址">
            <el-input v-model="ruleForm.address" clearable></el-input>
          </el-form-item>

          <el-form-item prop="age" label="年龄">
            <el-input v-model="ruleForm.age" clearable></el-input>
          </el-form-item>

          <el-form-item prop="phone" label="手机号">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>

          <el-form-item class="d-flex">
            <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
            <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>

            <router-link
              to="/userInfo"
              class="btn btn-outline-primary mx-2"
              style="margin-right:5px;"
              tag="button"
            >返回</router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: this.$store.getters.getUserInfo.id,
        username: this.$store.getters.getUserInfo.username,
        address: this.$store.getters.getUserInfo.address,
        phone: this.$store.getters.getUserInfo.phone,
        sex: this.$store.getters.getUserInfo.sex,
        age: this.$store.getters.getUserInfo.age,
      },
      rules: {
        username: [
          { message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        phone: [
          { message: '请输入电话号码', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '请输入正确的电话号码',
            trigger: 'blur',
          },
        ],
        address: [
          { message: '请输入邮箱地址', trigger: 'blur' },
          {
            message: '请输入正确的地址',
            trigger: 'blur',
          },
        ],
      },
    }
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data } = await this.$http.post('/sys/user/modify', {
            id: this.ruleForm.id,
            username: this.ruleForm.username,
            phone: this.ruleForm.phone,
            address: this.ruleForm.address,
            sex: this.ruleForm.sex,
            age: this.ruleForm.age,
          })

          if (data.code != 200) {
            this.$refs[formName].resetFields()
            this.$message.error(data.msg)
          } else {
            this.$refs[formName].resetFields()
            this.$message.success(data.msg)
            this.getUser()
            this.$router.push('/userInfo')
          }
        }
      })
    },
    getUser() {
      this.$http.get('/sys/userInfo').then((res) => {
        this.userInfo = res.data.data.data
        this.$store.commit('setUserInfo', res.data.data)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.modification {
  height: 100vh;
  background: url(https://cdn.syjun.vip/background.png) no-repeat 100% 100%;
  .card {
    background: transparent;
    border: none !important;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.myavater {
  transition: all 0.5s;
}
.myavater:hover {
  transform: scale(1.3);
}
p {
  text-indent: 0 !important;
}
</style>
